<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>选择数据源类型</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}" media="screen"/>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" media="all"/>
    <style>
        .db-type-card {
            cursor: pointer;
            border: 1px solid #f2f2f2;
            border-radius: 5px;
            transition: all .3s;
        }
        .db-type-card:hover {
            border: 1px solid #16baaa;
            box-shadow: 0 0 10px rgba(0,0,0,.1);
        }
        .db-type-card .layui-card-body {
            padding: 20px;
            display: flex;
            align-items: center;
        }
        .db-type-card img {
            width: 40px;
            height: 40px;
            margin-right: 15px;
        }
        .db-info {
            flex: 1;
        }
        .db-info .db-name {
            font-size: 16px;
            font-weight: 500;
        }
        .db-info .db-desc {
            color: #999;
            font-size: 12px;
        }
        .arrow {
            font-size: 20px;
            color: #999;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">选择要创建的数据源类型:</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15" id="dbTypeList">
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layui.js}"></script>
<script th:replace="~{base::ctx}"></script>
<script>
    const defaultImage = "";
    layui.use(['jquery', 'layer'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        post(ctx + 'dataSourceManager/findDriverConfigList', null, function (res) {
            if (res.code === 200) {
                res.data.push({"id":-1,"image":defaultImage,"name":"Custom","typeName":"自定义","capacity":"无"});
                let dbTypeListHtml = '';
                res.data.forEach(function (db) {
                    dbTypeListHtml += `
                        <div class="layui-col-md4">
                            <div class="layui-card db-type-card" data-id="${db.id}">
                                <div class="layui-card-body">
                                    <img src="${db.image || defaultImage}" onerror="" width="96" height="96" alt="database"/>
                                    <div class="db-info">
                                        <div class="db-name">${db.name}</div>
                                        <div class="db-desc">${db.typeName || ''} | ${db.capacity || 'No description available.'}</div>
                                    </div>
                                    <i class="layui-icon layui-icon-right arrow"></i>
                                </div>
                            </div>
                        </div>
                    `;
                });
                $('#dbTypeList').html(dbTypeListHtml);
            } else {
                layer.msg('加载数据库类型失败', {icon: 2});
            }
        });

        $(document).on('click', '.db-type-card', function () {
            const dbTypeId = $(this).data('id');
            window.location.href = ctx + 'dataSourceManager/addSourcePage?id=' + dbTypeId;
        });
    });
</script>
</body>
</html>